// +----------------------------------------------------------------------
// | likeshop开源商城系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | gitee下载：https://gitee.com/likeshop_gitee
// | github下载：https://github.com/likeshop-github
// | 访问官网：https://www.likeshop.cn
// | 访问社区：https://home.likeshop.cn
// | 访问手册：http://doc.likeshop.cn
// | 微信公众号：likeshop技术社区
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
// |  likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | likeshop团队版权所有并拥有最终解释权
// +----------------------------------------------------------------------
// | author: likeshop.cn.team
// +----------------------------------------------------------------------

<template>
	<view>
		<view class="order-list">
			<navigator v-for="(item, index) in orderList" :key="index" hover-class="none" class="order-item bg-white mt20" :url="'/pages/order_details/order_details?id=' + item.id">
				<view class="order-header row-between">
					<view class="row">
						<view class="mr10">
							<u-tag text="拼团" size="mini" type="primary" mode="plain" />
						</view>
						订单编号：{{item.id}}
					</view>
					<view :class="item.state == -1 ? 'muted' : 'primary'">{{ statusText[item.state] }}</view>
				</view>
				<view class="order-con">
					<view class="item row goods-de mt20">
						<view class="goods-img">
							<custom-image :lazy-load="true" width="180rpx" height="180rpx" radius="10rpx" lazy-load :src="item.product.pics[0]"></custom-image>
						</view>
						<view class="goods-info ml20 mr20">
							<view class="goods-name line2 mb10">{{item.product.title}}</view>
							<text class="merchant-name mb10 xxs" v-if="item.product.brand">{{item.product.brand}}</text>
							<text class="merchant-name mb10 xxs" v-if="item.product.dose">剂量：{{item.product.dose}}</text>
						</view>
					</view>
					<!-- <order-goods :list="item.order_goods"></order-goods> -->
					<view class="all-price row-end">
						<!-- <text class="muted xs">共{{item.goods_count}}件商品，总金额：</text> -->
						<text class="muted xs">总金额：</text>
						<price-format :subscript-size="30" :first-size="30" :second-size="30" :price="item.actual_order_amount/100"></price-format>
					</view>
				</view>
				<view v-if="item.product.merchant" class="order-hospital row-between">
					<view class="mr10">服务机构：{{ item.product.merchant.name }}</view>
					<view v-if="false" @click="changeHospital(item.hospital.id)" class="row" style="flex-shrink: 0;">
						<text class="muted">查看</text>
						<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image>
					</view>
				</view>
				<view class="order-footer row">
					<view style="flex: 1">
						<view class="primary sm row" style="line-height: 26rpx;" v-if="getCancelTime(item.order_cancel_time) > 0"><u-count-down separator="zh"
							 :timestamp="getCancelTime(item.order_cancel_time)" separator-color="#FF2C3C" color="#FF2C3C" :separator-size="26"
							 :font-size="26" bg-color="transparent" @end="reflesh"></u-count-down></view>
					</view>
					<view v-if="item.state>=0 && item.state<=2">
						<button size="sm" class="plain br60 lighter" hover-class="none" @tap.stop="cancelOrder(item.id)">
							取消订单
						</button>
					</view>
					<view  v-if="item.delivery_btn" @tap.stop="goPage('/bundle/pages/goods_logistics/goods_logistics?id=' + item.id)">
						<button size="sm" class="btn plain br60 lighter" hover-class="none">查看物流</button>
					</view>
					<view v-if="item.del_btn">
						<button size="sm" class="btn plain br60 lighter" hover-class="none" @tap.stop="delOrder(item.id)">删除订单</button>
					</view>
					<view v-if="item.state==0" class="ml20">
						<button size="sm" class="btn bg-primary br60 white" @tap.stop="payNow(item.id)">
							立即付款
						</button>
					</view>
					<view v-if="item.state==1" class="ml20">
						<button size="sm" class="btn bg-primary br60 white" @tap.stop="go2shareGroup(item.product.id, item.user.id)">
							分享拼团
						</button>
					</view>
					<view v-if="item.comment_btn" class="ml20">
						<button size="sm" hover-class="none" class="btn plain btn br60 primary red">
							去评价
						</button>
					</view>
					<view v-if="item.pickup_btn" class="ml20">
						<button size="sm" hover-class="none" class="btn plain btn br60 primary red">
							查看核销码
						</button>
					</view>
					<view v-if="item.take_btn" class="ml20">
						<button size="sm" class="btn plain br60 primary red" hover-class="none" @tap.stop="comfirmOrder(item.id)">确认收货</button>
					</view>
				</view>
			</navigator>
			<loading-footer :status="status" :slot-empty="true" @refresh="reload">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
		</view>
		<order-dialog ref="orderDialog" :order-id="orderId" :type="type" @refresh="reflesh"></order-dialog>
		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</view>
</template>


<script>
	import {
		getOrderList,
		cancelOrder,
		delOrder,
		confirmOrder
	} from '@/api/order';
	import {
		prepay
	} from '@/api/app';
	import {
		loadingType
	} from '@/utils/type';

	import {
		wxpay,
		alipay
	} from '@/utils/pay';
	import {
		loadingFun
	} from '@/utils/tools'
	export default {
		data() {
			return {
				page: 1,
				orderList: [],
				status: loadingType.LOADING,
				showCancel: false,
				type: 0,
				orderId: "",
				showLoading: false,
				statusText: {
					'-1': '取消',
					'0' : '待付款',
					'1' : '待成团',
					'2' : '待核销',
					'3' : '已完成'
				}
			};
		},

		components: {

		},
		props: {
			orderType: {
				type: [Number, null]
			}
		},
		created: function() {
			uni.$on("refreshorder", () => {
				this.reflesh()
			})
			uni.$on('payment', params => {
				if (params.result) {
					this.reflesh()
					uni.navigateBack()
					setTimeout(() => this.$toast({ title: "支付成功" }), 0.5 * 1000)
				}
			})
		},
		beforeMount: function() {
			this.getOrderListFun();
		},
		destroyed: function() {
			uni.$off(['payment', 'refreshorder'])
		},
		methods: {
			reflesh() {
				this.page = 1
				this.orderList = []
				this.status = loadingType.LOADING
				this.type = 0
				this.getOrderListFun();
			},

			reload() {
				this.status = loadingType.LOADING
				this.getOrderListFun();
			},

			changeHospital(id) {
				uni.navigateTo({
					url: '/pages/hospital/detail/detail?id=' + id
				});
			},
			orderDialog() {
				this.$refs.orderDialog.open()
			},

			delOrder(id) {
				this.orderId = id
				this.type = 1
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			comfirmOrder(id) {
				this.orderId = id
				this.type = 2
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			cancelOrder(id) {
				this.orderId = id
				this.type = 0
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			payNow(id) {
				this.showLoading = true
				// uni.navigateTo({
				// 	url: `/pages/payment/payment?from=${'order'}&order_id=${id}`
				// })
				
				prepay({
					from: 'order',
					order_id: id
				}).then(res => {
					let args = res.data;
					this.showLoading = false
					if (res.s === 0) {
						wxpay(res.d.pay_data).then((resPay) => {
							if(resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					}else if(res.code == 20001){
						alipay(args).then((resPay) => {
							if(resPay == 'success') {
								this.$toast({
									title: "支付成功"
								})
								uni.$emit("refreshorder")
							}
						})
					}
				});
				
				
			},
			
			go2shareGroup(goods_id, found_id) {
				uni.navigateTo({
					url: `/pages/goods_details/goods_details?action=share_group&marketer_id=${found_id}&id=${goods_id}`
				})
			},

			async getOrderListFun() {
				if (loadingType.FINISHED == this.status) return;
				let {
					page,
					orderType,
					orderList,
					status
				} = this;
				console.log(page, 'page')
				const data = await loadingFun(getOrderList, page, orderList, status, {
					state: orderType,
					page,
					pagesize: 10
				})
				console.log(data)
				if (!data) return
				console.log(data, 'data')
				this.page = data.page
				this.orderList = data.dataList
				this.status = data.status
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			}

		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let text = ''
					switch (status) {
						case 0:
							text = '待支付';
							break;
						case 1:
							text = '待发货';
							break;
						case 2:
							text = '待收货';
							break;
						case 3:
							text = '已完成';
							break;
						case 4:
							text = '订单已关闭';
							break;
					}
					return text
				}
			},
			getCancelTime() {
				return (time) => time - Date.now()/1000
			}
		}
	};
</script>
<style lang="scss">
	.order-hospital{
		border-top: 1px solid #E5E5E5;
		padding: 32upx 24upx;
	}
	.order-list {
		// min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}

				}
			}
		}
	}
	.goods-de {
		display: flex;
		align-items: flex-start;
	}
</style>
